<style>
    .sp_container {
        width: 40% !important;
    }
</style>

<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">关联父级选项吗</label>
        <div class="col-xs-12 col-sm-8">
            <div class="radio">
                <label for="row[type]-input1"><input id="row[type]-input1" name="row[ifrelated]" type="radio" value="no"
                        checked>不关联</label>
                <label for="row[type]-radio2"><input id="row[type]-radio2" name="row[ifrelated]" type="radio"
                        value="yes">关联</label>
            </div>
        </div>
    </div>

    <div id="add_line22" style="display: none;">
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">父级</label>
            <div class="col-xs-10 col-sm-8">
                <input id="c-cp_trans_id" data-source="activityform/fromurlque/parentOption"
                    class="form-control selectpage" name="row[cp_trans_id]" type="text" value="">
                <input id="c-cp_trans_ids" data-source="activityform/fromurlque/index"
                    data-params='{"custom[type]":"-1"}' class="form-control selectpage" name="row[cp_trans_ids]"
                    type="text" value="">
            </div>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Name')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-name" data-rule="required" class="form-control" name="row[name]" type="text">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Name_desc')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-name_desc" class="form-control" name="row[name_desc]" type="text">
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Type')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="radio">
                <label for="row[type]-input"><input id="row[type]-input" name="row[type]" type="radio" value="input"
                        checked>输入框</label>
                <label for="row[type]-radio"><input id="row[type]-radio" name="row[type]" type="radio"
                        value="radio">单选框</label>
                <label for="row[type]-checkbox"><input id="row[type]-checkbox" name="row[type]" type="radio"
                        value="checkbox">多选框</label>
                <!-- <label for="row[type]-image"><input id="row[type]-image" name="row[type]" type="radio"
                        value="image">图片</label> -->
            </div>
        </div>
        <button id="add" class="btn btn-danger" type="button" onclick="adds()" style="display: none;">增加</button>
    </div>


    <div id="add_line2" style="display: none;">
        <div class="form-group" id="add_line1">
            <label class="control-label col-xs-12 col-sm-2">选项</label>
            <div class="col-xs-12 col-sm-8">
                <input class="form-control" name="row[type_desc][]" type="text" placeholder="内容">
            </div>
            <button class="btn btn-danger" type="button" onclick="del(this)" style="display:none;">删除</button>
        </div>
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>
<script type="text/javascript" src="__CDN__/assets/js/backend/activityform/jquery.js"></script>
<script>
    $('input:radio[name="row[ifrelated]"]').change(function () {
        var ctypes = $(this).val();
        console.log();
        if ((ctypes == 'yes')) {
            $('#add_line22').css('display', 'block');
        } else {
            $('#add_line22').css('display', 'none');
        }
    });
    $('input:radio[name="row[type]"]').change(function () {
        var ctype = $(this).val();

        if ((ctype == 'radio') || (ctype == 'checkbox')) {
            $('#add').css('display', 'inline-block');
            $('#add_line2').css('display', 'block');
        } else {
            $('#add').css('display', 'none');
            $('#add_line2').css('display', 'none');
        }
    });

    /**
     * 新增一行
     */
    function adds() {
        var add_line = document.getElementById('add_line2');                            //简化代码，把id名赋值给等号前面的名称中
        var add_line1 = document.getElementById('add_line1');                            //简化代码，把id名赋值给等号前面的名称中

        var nodeFather = add_line;       //获取add_line中父节点并赋值到nodeFather

        var node_clone = add_line1.cloneNode();     //获取add_line中使用cloneNode()中方法克隆所有属性以及它们的值

        content = add_line1.innerHTML;      //innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML

        content = content.replace('display:none;', '');
        node_clone.removeAttribute('id');      //removeAttribute() 方法删除指定的属性

        node_clone.innerHTML = content;      //

        nodeFather.appendChild(node_clone);   //appendChild() 方法向节点添加最后一个子节点
    }

    /**
     * 删除当前行
     */
    function del(r) {
        r.parentNode.remove();
    }
</script>